<!--
 * @Author: zhang00001 774004514@qq.com
 * @Date: 2024-06-17 10:18:04
 * @LastEditors: yansheng 610363806@qq.com
 * @LastEditTime: 2024-07-28 00:20:31
 * @FilePath: \vue-admin\src\pages\active\ActivityForm.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <a-drawer
      :title="'预览'"
      placement="right"
       :maskClosable='false'
    :keyboard='false'
      @close="showAddDialog = false"
      width="500"
      v-model:open="showAddDialog"
    >
      <div class="phone">
        <div
          class="phone-content"
          v-html="previewContent"
        ></div>
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
  import { ref, defineEmits, defineExpose, defineProps, toRefs, nextTick, reactive } from 'vue'

  const emits = defineEmits(['activity-added', 'close'])
  const props = defineProps({})
  const showAddDialog = ref(false)

  const loading = ref(false)

  const previewContent = ref(null)

  const dateRow = ref()
  const activeId = ref(null)
  const init = (row) => {
    showAddDialog.value = true
    nextTick(() => {
      previewContent.value = row
    })
  }
  defineExpose({
    init
  })
</script>

<style scoped lang="less">
  .phone {
    width: 358.5px;
    height: 727.5px;

    background-color: #f5f5f5;
    margin: 0 auto;

    padding: 10px;
    box-sizing: border-box;
    background-image: url('./../assets/iphone1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
  }
  .phone-content {
    width: 303px;
    height: 646px;
    border-radius: 15px;
    overflow-y: scroll;
    margin: 20px;
    margin-top: 30px;
  }

  /* 整个滚动条 */
  ::-webkit-scrollbar {
    width: 5px; /* 滚动条宽度 */
    height: 5px; /* 滚动条高度 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道颜色 */
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background: #888; /* 滑块颜色 */
  }

  /* 滑块hover效果 */
  ::-webkit-scrollbar-thumb:hover {
    background: #555; /* 滑块hover颜色 */
  }
  .phone-content {
    /deep/ img {
      width: 100%;
      height: 100%;
    }
  }
</style>
